<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>document</title>
  <style type="text/css">
    *{margin: 0;padding: 0;}
    body{background: #000}
    button{width: 70px;margin: 10px 10px 10px 0;border-radius: 10px;border: none;outline: none;}
    #box{width: 820px;height: 450px;background: #58D8F5;margin: 50px auto;padding: 40px 12px;}
    #box_1{width: 450px;height: 340px;padding: 20px;border: 5px solid #150DF5;float: left;position: relative;text-align: center;background: #F00AD6}
    #box_1 img{width: 450px;height: 250px;}
    #box_2{width: 245px;height: 340px;padding: 20px;border: 5px solid #150DF5;float: left;margin-left: 20px;position: relative;text-align: center;background: #F00AD6}
    #box_2 img{width: 245px;height: 250px;}
    strong{}
    span{position: absolute;left: 20px;bottom: 30px;}
  </style>
  <script type="text/javascript">
    window.onload = function (){
      var Box = document.getElementById('box');
      var Box_1 = document.getElementById('box_1');
      var Box_2 = document.getElementById('box_2');
      var Bt = document.getElementsByTagName('button');
      var Str1 = Box_1.getElementsByTagName('strong')[0];
      var Str2 = Box_2.getElementsByTagName('strong')[0];
      var Span1 = Box_1.getElementsByTagName('span')[0];
      var Span2 = Box_2.getElementsByTagName('span')[0];
      var Img1 = Box_1.getElementsByTagName('img')[0];
      var Img2 = Box_2.getElementsByTagName('img')[0];
      var arr1 = ["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg"]
      var arr2 = ["images/1.png","images/2.png","images/3.png","images/4.png"]
      var num = 0;
      var num1 = 0;
      //--------------------------------------------
      function fun1(){
        Img1.src = arr1[num];
        Str1.innerHTML = "第一组第" + (num + 1) + "张";
        Span1.innerHTML = num + 1 + "/" + arr1.length;
      }
      fun1();
      //--------------------------------------------------
      function fun2(){
        Img2.src = arr2[num1];
        Str2.innerHTML = "第一组第" + (num1 + 1) + "张";
        Span2.innerHTML = num1 + 1 + "/" + arr2.length;
      }
      fun2();
      //------------------------------------------------
      Img1.onclick = function(){
        num++;
        if(num == arr1.length){
          num = 0;
        }
        fun1();
      }
      Img2.onclick = function(){
        num1++;
        if(num1 == arr2.length){
          num1 = 0;
        }
        fun2();
      }
      Bt[1].onclick = function(){
        num++;
        num1++;
        if(num == arr1.length){
          num = 0;
        }
        fun1();
        if(num1 == arr2.length){
          num1 = 0;
        }
        fun2();
      }
      Bt[0].onclick = function(){
        num--;
        num1--;
        if(num == -1){
          num = arr1.length - 1;
        }
        fun1();
        if(num1 == -1){
          num1 = arr2.length - 1;
        }
        fun2();
      }
    }
  </script>
</head>
<body>
 	<div id="box">
    <button>上一组</button>
    <button>下一组</button><br>
    <div id="box_1">
      <img src=""><br>
      <strong>文字加载中......</strong>
      <span>文字加载中......</span>
    </div>
    <div id="box_2">
      <img src="">
      <strong>文字加载中......</strong>
      <span>文字加载中......</span>
    </div>
  </div>
</body>
</html>